<template>
    <nav>
        <ul class="pagination">
            <li :class="{'disabled': current == 1}">
                <a href="javascript:void(0);" @click="getPageData(current - 1)"> « </a>
            </li>
            <li :class="{'disabled': current == 1}">
                <a href="javascript:void(0);" @click="getPageData(1)" class="edgePage"> 首页 </a>
            </li>

            <li v-for="(p,index) in groupList" :class="{'active': current == p.val}">
                <a href="javascript:void(0);" @click="getPageData(p.val)"> {{ p.text }} </a>
            </li>

            <li :class="{'disabled': current == page}">
                <a href="javascript:void(0);" @click="getPageData(page)" class="edgePage"> 尾页 </a>
            </li>

            <li :class="{'disabled': current == page}">
                <a href="javascript:void(0);" @click="getPageData(current + 1)"> »</a>
            </li>
        </ul>
    </nav>
</template>

<script type="es6">
    export default {
        data () {
            return {
                current: this.currentPage,
            }
        },
        props: {
            total: {// 数据总条数
                type: Number,
                default: 0
            },
            display: {// 每页显示条数
                type: Number,
                default: 10
            },
            currentPage: {// 当前页码
                type: Number,
                default: 1
            },
            pageGroup: {// 分页条数
                type: Number,
                default: 5,
            }
        },
        computed: {
            page: function () { // 总页数
                return Math.ceil(this.total / this.display)
            },
            groupList: function () { // 获取分页页码
                let len = this.page, temp = [], list = [], count = Math.floor(this.pageGroup / 2),
                    center = this.current
                if (len <= this.pageGroup) {
                    while (len--) {
                        temp.push({text: this.page - len, val: this.page - len})
                    }
                    return temp
                }
                while (len--) {
                    temp.push(this.page - len)
                }
                let idx = temp.indexOf(center);
                (idx < count) && (center = center + count - idx);
                (this.current > this.page - count) && (center = this.page - count)
                temp = temp.splice(center - count - 1, this.pageGroup)
                do {
                    let t = temp.shift()
                    list.push({
                        text: t,
                        val: t
                    })
                } while (temp.length)
                if (this.page > this.pageGroup) {
                    (this.current > count + 1) && list.unshift({text: '...', val: list[0].val - 1});
                    (this.current < this.page - count) && list.push({text: '...', val: list[list.length - 1].val + 1})
                }
                return list
            }
        },
        methods: {
            getPageData: function (idx) {
                if (this.current !== idx && idx > 0 && idx < this.page + 1) {
                    this.current = idx
                }
                this.$emit('pageChange', this.current)
            },
            setCurrent (i) {
                this.current = i
            }
        }
    }
</script>

<style scoped>
    .edgePage {
        width: 0.8rem;
    }

    .pagination {
        overflow: hidden;
        display: table;
        height: 30px;
        margin: 10px auto;
    }

    li {
        float: left;
        height: 30px;
        border-radius: 0.05rem;
        margin: 3px;
    }

    li:hover {
        background: rgb(23, 210, 156);
    }

    a {
        color: #fff;
        display: block;
        text-align: center;
        font-size: 0.12rem;
        border-radius: 0.05rem;
        text-decoration: none
    }

    .active {
        background: rgb(23, 210, 156);
    }

    .pagination > .active > a, .pagination > .active > a:focus, .pagination > .active > a:hover, .pagination > .active > span, .pagination > .active > span:focus, .pagination > .active > span:hover {
        z-index: 3;
        color: #fff;
        cursor: default;
        background-color: rgb(23, 210, 156);
        border-color: rgb(23, 210, 156);
    }

    .pagination > li > a {
        color: rgb(23, 210, 156);
    }
</style>
